<template>
  <van-row>
    <van-nav-bar
      title="员工详情"
      left-arrow
      @click-left="$emit('close')"
    >
      <template #right>
        <van-popover
          v-model="showPopover"
          placement="bottom-end"
          trigger="click"
          :actions="actions"
          @select="handleAction"
        >
          <template #reference>
            <van-icon name="ellipsis" size="20" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-cell title="员工编号" :value="submitForm.employeeNo" />
    <van-cell title="员工名称" :value="submitForm.employeeName" />
    <van-cell title="手机号" :value="submitForm.phoneNum" />
    <van-cell title="身份证号码" :value="submitForm.idNo" />
    <van-cell title="性别">
      <template #default>
        <sex-tag v-model="submitForm.sex" />
      </template>
    </van-cell>
    <van-cell title="出生日期" :value="submitForm.birthDay" />
    <van-cell title="入职日期" :value="submitForm.hireDate" />
    <van-cell title="职位状态">
      <template #default>
        <position-state-tag v-model="submitForm.positionState" />
      </template>
    </van-cell>
    <van-cell v-if="submitForm.positionState === '0'" title="离职日期" :value="submitForm.departureDate" />
    <van-cell title="家庭住址" :value="submitForm.homeAddress" />
    <van-cell title="紧急联系人" :value="submitForm.emergencyContactName" />
    <van-cell title="紧急联系人号码" :value="submitForm.emergencyContactNum" />
    <van-cell title="银行卡号" :value="submitForm.bankCardNo" />
    <van-cell title="开户行" :value="submitForm.openingBank" />
    <van-popup v-model="showSubmit" position="right" :style="{ width: '100%', height: '100%' }">
      <employee-submit-module ref="submitModule" @close="handleClose" />
    </van-popup>
  </van-row>
</template>

<script>
import moment from 'moment'
import { Dialog } from 'vant'
import EmployeeSubmitModule from '@/views/employee/employeeSubmit.vue'
import { deleteEmployee, selectEmployeeById } from '@/api/employee'
import SexTag from '@/components/tag/SexTag.vue'
import PositionStateTag from '@/components/tag/PositionStateTag.vue'

export default {
  name: 'EmployeeDetailModule',
  components: { PositionStateTag, SexTag, EmployeeSubmitModule },
  data() {
    return {
      showPopover: false,
      showSubmit: false,
      title: '',
      submitForm: {},
      minDate: moment(new Date()).subtract(30, 'years').toDate(),
      actions: [{ icon: 'edit', text: '修改', action: 'edit', disabled: false },
        { icon: 'delete-o', text: '删除', action: 'delete', disabled: false }]
    }
  },
  methods: {
    init(id) {
      this.title = '修改模具'
      if (!id) {
        this.title = '新增模具'
        return
      }
      selectEmployeeById(id).then(resp => {
        if (resp.success) {
          this.submitForm = resp.data
        }
      })
    },
    handleAction(row) {
      if (row.action === 'delete') {
        this.handleDelete()
      } else if (row.action === 'edit') {
        this.toEdit()
      }
    },
    handleDelete() {
      Dialog.confirm({
        title: '删除确认',
        message: '是否删除此信息'
      }).then(() => {
        deleteEmployee({ ids: [this.submitForm.id] }).then(resp => {
          if (resp.success) {
            this.$toast.success('删除成功')
            this.$emit('close')
          }
        })
      }).catch(() => {})
    },
    toEdit() {
      this.showSubmit = true
      this.$nextTick(() => {
        this.$refs.submitModule.init(this.submitForm.id)
      })
    },
    handleClose() {
      this.showSubmit = false
      this.init(this.submitForm.id)
    }
  }
}
</script>

<style scoped>

</style>
